<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css">
    <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
    <script src="./html2canvas.js"></script>
</head>

<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
    <button style="position: absolute;left: 10px;top: 10px;z-index: 1000;" onclick="print()">打印</button>
    <script type="text/javascript">
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
        const viewer = new Cesium.Viewer('map', {
            contextOptions: {
                webgl: {
                    // 一定要加，要不然是黑色
                    preserveDrawingBuffer: true // 设置为 true 来启用
                }
            }
        });
        viewer.scene.debugShowFramesPerSecond = true;
        viewer.scene.globe.depthTestAgainstTerrain = true;

        function print() {
            var element = document.getElementById('map');
            html2canvas(element, {
                useCORS: true,
                allowTaint: true,

            }).then(function (canvas) {
                const imgData = canvas.toDataURL('image/png');
                console.log(imgData)

                const link = document.createElement('a');
                link.href = imgData;
                link.download = 'myImage.png';
                link.click();
            });
        }
    </script>
</body>

</html>